<template>
    <div class="h1">
        <HouseLeftNavigation :navList="navList.data" :defaultClick="navList.defaultClick" @returnData="setPage">
        </HouseLeftNavigation>
        <div class="time1">
            <div class="t1">
                <div class="t2">{{ timeLineData.title }}</div>
                <div class="t3">{{ timeLineData.detailTitle }}</div>
            </div>
            <div class="time2" v-infinite-scroll="load" :infinite-scroll-disabled="disabled" style="padding: 0;margin: 0;">
                <el-timeline>
                    <el-timeline-item :timestamp="s.recordTime" placement="top" v-for="s in timeLineData.timeDataList"
                        v-bind:key="s.time" style="text-align: left;" :color="'#6698ff'">
                        <div class="t4">
                            <el-card style="margin-right: 20px;white-space: nowrap;min-width: min-content;"
                                v-if="s.realName">
                                <p class="t5">{{ s.realName }}</p>
                            </el-card>
                            <el-card style="margin-right: 20px;">
                                <p class="t5" v-html="s.message"></p>
                            </el-card>
                            <el-card v-show="s.isShowImg" style="margin-right: 20px;">
                                <div class="t4">
                                    <p class="t5">图片:</p>
                                    <div style="position: relative;">
                                        <img class="i1" src="../../assets/images/housePic.png">
                                        <span class="mask">+{{ s.imgCount }}</span>
                                    </div>
                                </div>
                            </el-card>
                        </div>
                    </el-timeline-item>
                    <el-divider v-if="loading">
                        {{ $t('text.House.l207') }}
                    </el-divider>
                    <el-divider v-if="disabled">
                        {{ $t('text.House.l48') }}
                    </el-divider>
                </el-timeline>
            </div>
        </div>
    </div>
</template>
    
<script>
import HouseLeftNavigation from '../../components/navigation/HouseLeftNavigation.vue'
import { trendsFindPage } from '../../http/api'
export default {
    name: 'HousingUpdatesDetail',
    components: {
        HouseLeftNavigation
    },
    data() {
        return {
            navList: {
                defaultClick: this.$t('text.House.l49'), data: [
                    { name: this.$t('text.House.l49'), img: require('../../assets/images/h1.svg'), count: 0 },
                    { name: this.$t('text.House.l50'), img: require('../../assets/images/h9.svg'), count: 0 },
                    { name: this.$t('text.House.l51'), img: require('../../assets/images/h10.svg'), count: 0 },
                    { name: this.$t('text.House.l53'), img: require('../../assets/images/h12.svg'), count: 0 },
                ]
            },
            timeLineData: {
                title: this.$t('text.House.l49'),
                detailTitle: this.$t('text.House.l54'),
                timeDataList: []
            },
            timeLineData1: {
                title: this.$t('text.House.l49'),
                detailTitle: this.$t('text.House.l54'),
                timeDataList: []
            },
            timeLineData2: {
                title: this.$t('text.House.l50'),
                detailTitle: this.$t('text.House.l55'),
                timeDataList: []
            },
            timeLineData3: {
                title: this.$t('text.House.l51'),
                detailTitle: this.$t('text.House.l56'),
                timeDataList: []
            },
            timeLineData4: {
                title: this.$t('text.House.l53'),
                detailTitle: this.$t('text.House.l58'),
                timeDataList: []
            },
            type: '-1',
            total: 0,
            pageNo: 0,
            loading: false,
            disabled: false,
        }
    },
    mounted() {
    },
    methods: {
        setPage(index) {
            switch (index) {
                case 0: this.type = '-1'; this.timeLineData = this.timeLineData1; break;
                case 1: this.type = '0'; this.timeLineData = this.timeLineData2; break;
                case 2: this.type = '1'; this.timeLineData = this.timeLineData3; break;
                case 3: this.type = '3'; this.timeLineData = this.timeLineData4; break;
            }
        },
        load() {
            if (!this.disabled && !this.loading) {
                this.loading = true
                this.pageNo = this.pageNo + 1
                if (this.type == '-1') {
                    trendsFindPage({ refId: this.$route.query.id, moduleType: "客源", pageNo: this.pageNo, pageSize: 20 }).then(res => {
                        if (res !== undefined) {
                            this.timeLineData.timeDataList = [...this.timeLineData.timeDataList, ...res.dataList]
                            this.total = res.total
                            if (this.navList.data[0].count != res.total)
                                this.navList.data[0].count = res.total
                            if (this.pageNo * 20 >= res.total) {
                                this.disabled = true
                            }
                            this.loading = false
                        }
                    }).catch()
                } else {
                    trendsFindPage({ refId: this.$route.query.id, moduleType: "客源", type: this.type, pageNo: this.pageNo, pageSize: 20 }).then(res => {
                        if (res !== undefined) {
                            this.timeLineData.timeDataList = [...this.timeLineData.timeDataList, ...res.dataList]
                            this.total = res.total

                            if (this.pageNo * 20 >= res.total) {
                                this.disabled = true
                            }
                            this.loading = false
                        }
                    }).catch()
                }
            }
        }
    },
    watch: {
        type: {
            handler() {
                if (this.type == '-1') {
                    this.timeLineData.timeDataList = []
                    this.pageNo = 0
                    trendsFindPage({ refId: this.$route.query.id, moduleType: "客源", pageNo: this.pageNo, pageSize: 20 }).then(res => {
                        if (res !== undefined) {
                            this.timeLineData.timeDataList = [...this.timeLineData.timeDataList, ...res.dataList]
                            this.total = res.total
                        }
                    }).catch()
                } else {
                    this.timeLineData.timeDataList = []
                    this.pageNo = 0
                    trendsFindPage({ refId: this.$route.query.id, moduleType: "客源", type: this.type, pageNo: this.pageNo, pageSize: 20 }).then(res => {
                        if (res !== undefined) {
                            this.timeLineData.timeDataList = [...this.timeLineData.timeDataList, ...res.dataList]
                            this.total = res.total
                            let type = Number(this.type)
                            if (type == 3) { type = 2 }
                            if (this.navList.data[type + 1].count != res.total)
                                this.navList.data[type + 1].count = res.total
                            if (this.pageNo * 20 >= res.total) {
                                this.disabled = true
                            }
                            this.loading = false
                        }
                    }).catch()
                }
            }
        }
    },
    computed: {
    }

}
</script>

<style scoped>
.h1 {
    height: 100%;
    width: 100%;
    display: flex;
}

.h2 {
    padding-top: 25px;
    padding-left: 25px;
    width: 100%;
}

.time1 {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    padding-left: 20px;
}

.time2 {
    overflow: auto;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: inherit;
}

::v-deep(.el-timeline) {
    flex-grow: inherit;
    height: 100px;
}

.t1 {
    display: flex;
    text-align: left;
    flex-direction: column;
    padding-top: 20px;
}

.t2 {
    color: black;
    font-size: 14px;
}

.t3 {
    color: gray;
    font-size: 13px;
    padding-top: 5px;
    padding-bottom: 20px;
}

.t4 {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
}

::v-deep(.el-card__body) {
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 0;
    padding-bottom: 0;
}

.t5 {
    padding-right: 20px;
    word-break: break-all;
}

.i1 {
    width: 35px;
    height: 35px;
}

.mask {
    position: absolute;
    left: 10px;
    top: 10px;
    color: white;
    font-size: 15px;
    font-weight: bold;
    margin: auto 0;
}
</style>